import React,{ Component } from 'react'
import request from '../../utils/request'
import { Link } from 'react-router-dom'
import './index.scss'


export default class List extends Component{

    constructor(props){
        super(props)

        this.state = {
            lists:[]
        }
    }

    async componentDidMount() {
        const { id } = this.props.match.params
      const res = await request({
            url:'/index.php',
            method:'GET',
            params:{
                r:'class/cyajaxsub',
                page:1,
                cid:id,
                px:'t',
                cac_id:''
            }
        })
        // console.log(res)
        this.setState({
            lists:res.data.data.content
        })
    }

    renderList = lists =>{
        return lists.map( item =>(
            <li key={ item.id }>
                <Link
                to={{
                    pathname:`/details/${item.id}`,
                    search:`?id=${item.id}`,
                    state:{
                        id:item.id,
                        img:item.pic,
                        price:item.jiage,
                        quan_jine:item.yuanjia,
                        sall:item.xiaoliang,
                        comment:item.comment,
                        name:item.d_title,
                        miaoshu:item.miaoshu
                    }
                }}
                >
                    <div className="img-box">
                        <img src={ item.pic } alt=""/>
                    </div>
                    <div className="sall-box">
                        <h3>{ item.d_title }</h3>
                        <p className="jiage">券后<span>￥{ item.jiage }</span></p>
                        <span className="quan_jine"><span>券</span>{ item.quan_jine }元</span>
                        <div className="salse">
                            <span>已售{ item.xiaoliang } </span> | <span> 评论{ item.comment }</span>
                        </div>
                    </div>
                </Link>
            </li>
        ))
    }

    render(){
        console.log(this.state.lists)
        const { lists } = this.state
        return(
            <div className="container">
                <ul>
                    { this.renderList(lists) }
                </ul>
            </div>
        )
    }
}